<template>
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>AQI空气质量指数级别分布统计</el-breadcrumb-item>
  </el-breadcrumb>
  <el-alert
      title="AQI空气质量指数级别分布统计"
      type="success"
      effect="dark"
      :closable="false"
      style="width: 80%; margin: 20px 0"
  />
  <!-- 柱状图展示 -->
  <div class="chart-box">
    <v-chart :option="barOption" autoresize style="height: 350px;" />
  </div>
  <!-- 数据表格 -->
  <div class="table-box">
    <el-table
        :data="tableData"
        :cell-style="{ padding: '8px' }"
        empty-text="无数据"
        stripe
        highlight-current-row
        border
        style="width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px #f0f1f2; background: #fff;"
    >
      <el-table-column prop="aqiId" label="AQI指数等级" align="center" />
      <el-table-column prop="aqiExplain" label="AQI指数等级描述" align="center" />
      <el-table-column prop="total" label="数量" align="center" />
      <el-table-column prop="percent" label="占比" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, inject, computed } from "vue";
import { use } from "echarts/core";
import VChart from "vue-echarts";
import { BarChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer]);

const axios = inject("axios");

const aqiDistributeTotalArr = ref([]);

const totalCount = computed(() =>
    aqiDistributeTotalArr.value.reduce((sum, item) => sum + (item.total || 0), 0)
);

// 处理表格数据，增加百分比
const tableData = computed(() =>
    aqiDistributeTotalArr.value.map(item => ({
      ...item,
      percent: totalCount.value
          ? ((item.total / totalCount.value) * 100).toFixed(2) + "%"
          : "0%"
    }))
);

// 渐变色柱状图配置
const barOption = computed(() => ({
  title: {
    text: "AQI指数等级分布数量",
    left: "center"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: aqiDistributeTotalArr.value.map(item => item.aqiExplain || item.aqiId),
    axisTick: { alignWithLabel: true }
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "数量",
      type: "bar",
      barWidth: "60%",
      data: aqiDistributeTotalArr.value.map(item => item.total),
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#4fc3f7" }, // 渐变起始色
            { offset: 1, color: "#1976d2" }  // 渐变结束色
          ]
        },
        borderRadius: [6, 6, 0, 0]
      }
    }
  ]
}));

const init = () => {
  axios
      .post("statistics/listAqiDistributeTotalStatis")
      .then((response) => {
        aqiDistributeTotalArr.value = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
};
init();
</script>

<style scoped>
.chart-box,
.table-box {
  width: 80%;
  margin: 20px 0 0 0px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 20px 0;
}

.table-box {
  margin-top: 20px;
  padding: 0 0 20px 0;
  overflow: auto;
}

/* 美化表头 */
::v-deep .el-table__header th {
  background: #f5f7fa;
  color: #333;
  font-weight: bold;
  font-size: 15px;
  border-bottom: 2px solid #ebeef5;
}

/* 美化表格内容 */
::v-deep .el-table__body td {
  font-size: 14px;
  transition: background 0.2s;
}

/* 行悬浮高亮 */
::v-deep .el-table__body tr:hover > td {
  background: #f0f9eb !important;
}

/* 斑马纹 */
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafafa;
}
</style>